<template>
	<div class="index">
		<div class="top">
			<span>往期内容</span>
			<select name="" id="" class="select">
				<option value="12">第二十期</option>
			</select>
			<span class="change">切换</span>
		</div>
		<div class="egg-name">扭蛋管的名宇</div>
		<div class="egg-bot">
			<div class="egg-item">
				<img src="@/static/egg/egg.png" alt="">
			</div>
		</div>
		<div class="pool">
			<div class="title">本机扭蛋池</div>
			<div class="list">
				<div class="egg-list">
					<img src="@/static/egg/egglist.png" alt="">
					<div class="name">扭蛋一</div>
				</div>
				<div class="egg-list">
					<img src="@/static/egg/egglist.png" alt="">
					<div class="name">扭蛋一</div>
				</div>
				<div class="egg-list">
					<img src="@/static/egg/egglist.png" alt="">
					<div class="name">扭蛋一</div>
				</div>
				<div class="egg-list">
					<img src="@/static/egg/egglist.png" alt="">
					<div class="name">扭蛋一</div>
				</div>
				<div class="egg-list">
					<img src="@/static/egg/egglist.png" alt="">
					<div class="name">扭蛋一</div>
				</div>
				<div class="egg-list">
					<img src="@/static/egg/egglist.png" alt="">
					<div class="name">扭蛋一</div>
				</div>
				<div class="egg-list">
					<img src="@/static/egg/egglist.png" alt="">
					<div class="name">扭蛋一</div>
				</div>
				<div class="egg-list">
					<img src="@/static/egg/egglist.png" alt="">
					<div class="name">扭蛋一</div>
				</div>
				<div class="egg-list">
					<img src="@/static/egg/egglist.png" alt="">
					<div class="name">扭蛋一</div>
				</div>
				<div class="egg-list">
					<img src="@/static/egg/egglist.png" alt="">
					<div class="name">扭蛋一</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="left">每次消耗<br><span>100积分</span></div>
			<div class="bottom-center">
				<img src="@/static/egg/niu.png" alt="">
			</div>
			<div class="right">当前持有<br><span>150积分</span></div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			 columns:[
				{ text: '杭州', value: 'Hangzhou' },
				{ text: '宁波', value: 'Ningbo' },
				{ text: '温州', value: 'Wenzhou' },
				{ text: '绍兴', value: 'Shaoxing' },
				{ text: '湖州', value: 'Huzhou' },
			]
			}
		},
		onLoad() {
		},
		onPullDownRefresh() {
		},
		onReachBottom() {
		},
		methods: {

		}
	}
</script>

<style lang="postcss" scoped>
.index {
	width: 100vh;
	background: url(@/static/egg/eggbg.png) center center no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-family: "Source Han Sans";
	padding-bottom: 200upx;
	.top {
		margin-top: 56upx;
		color:#fff;
		.select {
			width: 370upx;
			height: 56upx;
			border-radius: 12upx;
			border: 1px solid rgba(156, 160, 163, 0.6);
			margin-left: 24upx;
			background: rgba(156, 160, 163, 0);
			color: #fff;
		}
		.change {
			width: 128upx;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			border-radius: 12upx;
			background: linear-gradient(270deg, #0093D8 0%, #00FFE5 175%);
			display: inline-block;
			margin-left: 24upx;
		}
	}
	.egg-name {
		width: 356upx;
		height: 84upx;
		line-height: 84upx;
		text-align: center;
		background: url(@/static/egg/eggnamebg.png) center center no-repeat;
		background-size: contain;
		color: #fff;
		margin-top: 40upx;
	}
	.egg-bot {
		width: 504upx;
		height: 504upx;
		background: url(@/static/egg/eggbot.png) center center no-repeat;
		background-size: contain;
		position: relative;
		.egg-item {
			width: 100upx;
			position: absolute;
			top:180upx;
			left:200upx;
			background: linear-gradient(0deg, #D8D8D8 0%, rgba(216, 216, 216, 0) 100%);
			box-sizing: border-box;
			border: 1upx solid rgba(255, 255, 255, 0.2);
			padding:14upx 10upx;
			border-radius:6px;
			img {
				display: block;
				width: 100%;
			}
		}
	}
	.pool {
		width: 684upx;
		height: auto;
		border-radius: 40upx;
		background: linear-gradient(180deg, #2C3AB8 0%, #8987F3 98%, rgba(62, 65, 75, 0) 100%);
		box-sizing: border-box;
		border: 2px solid rgba(221, 245, 253, 0.4);
		.title {
			color: #fff;
			font-family: Source Han Sans;
			font-size: 16px;
			font-weight: 500;
			text-align:center;
			margin-top:20upx;
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			gap: 36upx;
			padding: 32upx;
			.egg-list {
				width: 180upx;
				height: 206upx;
				background: #FFFFFF;
				border-radius: 8upx;
				font-size:12px;
				text-align:center;
				.name {
					padding-top: 16upx;
				}
				img {
					width: 100%;
					display: block;
				}
			}
		}
	}
	.bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 100upx;
		height: 120upx;
		width: 100%;
		align-items: center;
		background: linear-gradient(0deg, #42BCF5 0%, #3B68CD 64%, #3B67CD 75%, #383FBA 111%);
		border-top:1px solid rgba(255, 255, 255, 0.5);
		display: flex;
		justify-content: space-between;
		.left {
			color: #fff;
			font-size:24upx;
			text-align:center;
			margin-left:76upx;
			span {
				font-weight: bold;
			}
		}
		.right {
			color: #FFC300;
			font-size:24upx;
			text-align:center;
			margin-right:76upx;
			span {
				font-weight: bold;
			}
		}
		.bottom-center {
			width: 168upx;
			img {
				display: block;
				width:100%;
			}
		}
	}
}
</style>
